<template>
  <div class="flex items-center">
    <div
      @click="goto(tab.path)"
      v-for="tab in tabs"
      :key="tab.id"
      class=" cursor-pointer flex items-center justify-center bg-cover text-white ml-4 w-32"
      :class="{
        'text-white': route.path == tab.path,
        'text-gray-400': route.path != tab.path,
      }"
      :style="{
        backgroundImage:
          route.path == tab.path
            ? `url(${bgTabLightImage})`
            : `url(${bgTabImage})`,
        backgroundSize: '100% 100%',
      }"
    >
      <span class="block px-1 py-2">{{ tab.name }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import bgTabImage from '../../assets/bg_tab.png'
import bgTabLightImage from '../../assets/bg_tab_light.png'
import { MenuItem } from '../../types'

export default defineComponent({
  props: {
    tabs: Array as PropType<MenuItem[]>,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()

    const goto = (path: string) => {
      router.push(path)
    }

    return {
      goto,
      bgTabImage,
      bgTabLightImage,
      route,
    }
  },
})
</script>
